import React, { Component } from 'react';
import { Toast, WingBlank } from 'antd-mobile';
import { Image, ScrollView, StatusBar, Text, TouchableWithoutFeedback, View } from 'react-native';
import styles from './style';

export default class extends Component {
  constructor(props) {
    super(props);
    this.state = {
      content: '',
    };
  }

  static navigationOptions = ({ navigation }) => ({
    title: '用户协议',
    headerTitleStyle: {
      color: '#fff',
    },
    headerStyle: {
      backgroundColor: '#ed4040'
    },
    headerLeft: (
      <TouchableWithoutFeedback onPress={() => {
        Toast.hide();
        navigation.goBack();
      }}>
          <View>
            <Image style={{ width: 23, height: 23, tintColor: '#fff', marginLeft: 10 }}
                   source={require('../../images/back.png')}
                   resizeMode="cover"
            />
          </View>
        </TouchableWithoutFeedback>
    ),
  });

  async componentDidMount() {
    Toast.loading('加载中...', 999999999999);
    let f = await fetch('https://ecmad.com/toutiao/api/system/protocol', {
      method: 'GET',
    }).catch(() => {
      Toast.offline('网络异常', 2, f => f, false);
    });
    let res = await f.json();
    if (res.code === 200) {
      Toast.hide();
      this.setState({
        content: res.data[0].content,
      });
    } else {
      Toast.offline('网络异常', 2, f => f, false);
    }
  }

  renderContent() {
    const { content } = this.state;
    return content.split(/\n+/img).map((item, index) => (
      <Text style={styles.line} key={index}>{item}</Text>
    ))
  }

  render() {
    return (
      <ScrollView style={styles.protocol}>
        <StatusBar barStyle="light-content" />
        <WingBlank size="lg">
          {this.renderContent()}
        </WingBlank>
      </ScrollView>
    );
  }
}
